<template>
    <div>
      <div class="card card-custom gutter-b example example-compact" id="tableBody">
        <div class="card-header">
          <div class="card-title">
            <span class="card-icon">              
              <span class="svg-icon svg-icon-primary svg-icon-2x">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <polygon points="0 0 24 0 24 24 0 24"/>
                            <path d="M12,3 C12.5522847,3 13,3.44771525 13,4 L13,5 C13,5.55228475 12.5522847,6 12,6 C11.4477153,6 11,5.55228475 11,5 L11,
                            4 C11,3.44771525 11.4477153,3 12,3 Z M12,8 C12.5522847,8 13,8.44771525 13,9 L13,10 C13,10.5522847 12.5522847,11 12,
                            11 C11.4477153,11 11,10.5522847 11,10 L11,9 C11,8.44771525 11.4477153,8 12,
                            8 Z M12,13 C12.5522847,13 13,13.4477153 13,14 L13,15 C13,15.5522847 12.5522847,16 12,16 C11.4477153,16 11,15.5522847 11,
                            15 L11,14 C11,13.4477153 11.4477153,13 12,13 Z M12,18 C12.5522847,18 13,18.4477153 13,19 L13,20 C13,20.5522847 12.5522847,
                            21 12,21 C11.4477153,21 11,20.5522847 11,20 L11,19 C11,18.4477153 11.4477153,18 12,18 Z" fill="#000000"/>
                            <path d="M21,9.04031242 L21,14.9596876 C21,15.23583 20.7761424,15.4596876 20.5,15.4596876 C20.3864643,
                            15.4596876 20.276309,15.4210472 20.1876525,15.350122 L16.488043,12.3904344 C16.272412,12.2179296 16.2374514,
                            11.9032834 16.4099561,11.6876525 C16.433022,11.6588201 16.4592107,11.6326315 16.488043,11.6095656 L20.1876525,
                            8.64987802 C20.4032834,8.47737324 20.7179296,8.51233393 20.8904344,8.7279649 C20.9613596,
                            8.81662142 21,8.92677668 21,9.04031242 Z M3,14.9596876 L3,9.04031242 C3,8.76417005 3.22385763,
                            8.54031242 3.5,8.54031242 C3.61353575,8.54031242 3.723691,8.5789528 3.81234752,
                            8.64987802 L7.51195699,11.6095656 C7.72758796,11.7820704 7.76254865,12.0967166 7.59004388,
                            12.3123475 C7.56697799,12.3411799 7.54078935,12.3673685 7.51195699,12.3904344 L3.81234752,
                            15.350122 C3.59671656,15.5226268 3.28207037,15.4876661 3.1095656,15.2720351 C3.03864038,
                            15.1833786 3,15.0732233 3,14.9596876 Z" fill="#000000" opacity="0.3"/>
                        </g>
                    </svg>
                    </span>
            </span>
            <h3 class="card-label"> 单号版本 </h3>
          </div>
          <div class="card-toolbar">
            <div class="card-toolbar">
              <div class="example-tools justify-content-center">   
                <a class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3" href="javascript:void(0)" @click="resetAll()">
                  <b-spinner small variant="primary"  type="grow"></b-spinner>
                  刷新...
                </a>   
              </div>
            </div>
          </div>
        </div>
        <!--分页组件-->
        <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row :data="numberList" >
                 
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column label="序号" width="60">
            <template slot-scope="scope">
              {{scope.$index+1}} 
            </template>
          </el-table-column>
          <el-table-column align="left" prop="lastValue" width="140" show-overflow-tooltip label="原始值"></el-table-column>      
          <el-table-column align="left" prop="version" width="100" show-overflow-tooltip label="版本号"></el-table-column>      
          <el-table-column align="left" prop="createTime" :formatter="formatterCreateTime" width="180" show-overflow-tooltip label="创建时间"></el-table-column>      
          <el-table-column align="left" prop="updateTime" :formatter="formatterLastUpdateTime" width="180" show-overflow-tooltip label="最后更新日期"></el-table-column>     
          <el-table-column align="left" prop="type" show-overflow-tooltip label="模块"></el-table-column>      
        </el-table>
        <div class="block">
          <el-pagination
            hide-on-single-page   
            @size-change="handleSizeChange"        
            @current-change="handleCurrentChange"  
            :current-page="pageNo"                
            :page-sizes="[5, 10, 30, 50]"          
            :page-size="pageSize"			  
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="totalCount">		
          </el-pagination>
        </div>
      </div>
  </div> 
</template>
  
<script>
  import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js"; 
  import { handleNotify,handleAlert,handleConfirm,showWating,closeWating,dateformat} from "@/core/util/jehcUtil.js";
  export default {
    data(){
      return{
        searchForm:{name: ""},
        numberList:[],
        sels: [], //当前选框选中的值
        pageNo:1,      // 默认当前是第一页
        pageSize:5,    // 当前每页的数据是5条
        totalCount:0   // 总数默认为0
      }
    },
    components: {
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "单号维护" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods:{
      initList(){
        showWating({renderBody:"tableBody"});
        var params = {};
        params.usePageNo = true;//采用第几页进行分页（兼容）
        params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
        params.pageNo = this.pageNo;//开始的记录序号   
        params.searchJson = JSON.stringify(this.searchForm);//为form元素     
        apiUtil.queryPage(process.env.VUE_APP_SYS_API+"/sysNumber/list", params).then(({ data }) => {
          this.numberList = data.data;//给结果集赋值
          this.totalCount = data.total;// 获取当前数据的总数    
        });
      },         
      handleSelectionChange(sels) {//获取选中的值
        this.sels = sels;
        console.log("选中的值",sels.map((item) => item.id));
      },
      
      handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
        this.pageSize = val;  // 修改页的大小
        this.initList();       // 按新的pageNo和pageSize进行查询
      },
      handleCurrentChange(val) { // 修改当前页所触发的函数
        this.pageNo = val;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      search(){
        this.pageNo = 1;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      resetAll(){
        Object.assign(this.$data.searchForm, this.$options.data().searchForm);
        this.search();
      },
      formatterCreateTime(row, column){
        return dateformat(row.createTime);
      },
      formatterLastUpdateTime(row, columnta){
        return dateformat(row.updateTime);
      }
    }
  };
</script>